<template>
    <!-- 直接使用模板语法渲染自定义属性名 -->
    <p>{{ '父组件中传递的number:' + number }}</p>
    <!-- 也可以写成props.number -->
    <p>{{ '父组件中传递的number:' + props.number }}</p>
    <p>{{ '父组件中传递的str:' + props.str }}</p>
    <p>{{ '父组件中传递的x:' + x }}</p>
</template>
<script setup>
import {ref, defineProps} from 'vue'
// 声明自定义属性，所有自定义属性写在一个defineProps函数中
// 属性用在引用该组件的标签结构中
// 在父组件中写<Son number="1"></Son>
// 自定义属性在使用时，是只读状态
const props = defineProps(['number', 'str'])
const x = ref(props.str)
setTimeout(() => {x.value = '12345'}, 5000)
</script>
<style scoped>
    
</style>